<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
  class Login extends React.Component{
    handleSubmit = (event)=>{
      //event.preventDefault() // 阻止表单提交
      const {username, password} = this
      alert(`你输入的用户名是：${username.value}, 你输入的密码是：${password.value}`)
    }
    render(){
      return (
        <form action="baidu.com" onSubmit={this.handleSubmit}>
          用户名：<input ref={c => this.username = c} type="text" name="username" />
          密码：<input ref={c => this.password = c} type="password" name="password" />
          <button>登录</button>
          </form>
      )
    }
  }

ReactDOM.render(<Login />, document.getElementById('root'))
</script>
</html>
